<template>
  <a-menu
    :style="{ width: '100%', height: '100%' }"
    :default-selected-keys="[openedMenu]"
    :level-indent="10"
    auto-open-selected
    :selected-keys="[$route.path]"
    auto-scroll-into-view
    accordion
    @menu-item-click="to"
    show-collapse-button
    @collapse="onCollapse"
  >
    <sidebar-item v-for="route in permissionStore.routes" :key="route.path" :item="route" parent-path="" />
  </a-menu>
</template>

<script setup>
import { useAppStore } from '@/store/modules/app'
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import SidebarItem from './sidebar-item/index.vue'
import { usePermissionStore } from '@/store/modules/permission'
const permissionStore = usePermissionStore()

const appStore = useAppStore()
const $router = useRouter()

const openedMenu = computed(() => $router.currentRoute.value.path)

const to = (key) => {
  $router.push(key)
}

const onCollapse = (val) => {
  appStore.updateSettings({ menuCollapse: val })
}
</script>
